<!--Docker栏-->
<script setup lang="ts">
import useTaskStore from '@/store/task'
import {ref} from "vue";
import {appConfigType} from "@/types/component/core";

const taskStore = useTaskStore()

const appList = ref<Array<appConfigType>>([])
const appHandler = (name: string) => {
  taskStore.OPEN_APP(name)
}
const focusApp = ref<string | null>(null)
const showBoard = (name) => {
  focusApp.value = name
}
const closeBoard = () => {
  focusApp.value = null
}
</script>
<template>
  <div class="docker">
    <div class="docker-container">
      <template v-for="app in taskStore.appList">
        <div class="docker-item" @click="appHandler(app.name)" @mouseover="showBoard(app.name)"
             @mouseout="closeBoard()">
          <component :is="app.icon"></component>
          <div class="isActive-direct"
               :style="{backgroundColor:taskStore.getTaskIdx(app.name)===-1?'transparent':'#222127'}"></div>
          <div class="title-board" v-if="focusApp === app.name">
            <div class="board-content">{{ app.title }}</div>
            <div class="triangle"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
.docker {
  display: flex;
  min-width: 80px;
  height: 75px;
  padding: 0 5px;
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 22px;
  background-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  box-shadow: 2px -1px 7px rgb(0 0 0 / 40%);
  transition-property: width;
  transition-duration: inherit;
  transition: 0.6s;
  z-index: 100;


  .docker-container {
    display: flex;
    align-items: center;

    .docker-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      box-sizing: border-box;
      width: 60px;
      height: 70px;
      flex-direction: column;
      cursor: pointer;
      user-select: none;


      .docker-icon {
        display: block;
        font-size: 60px;
      }

      .isActive-direct {
        width: 4px;
        height: 4px;
        border-radius: 50%;
      }

      .title-board {
        position: absolute;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        z-index: 100;

        .board-content {
          width: 100px;
          text-align: center;
          height: 25px;
          line-height: 25px;
          background-color: rgba(255, 255, 255, .4);
          border-radius: 5px;
          box-shadow: -0.3px -0.3px 4px rgb(0 0 0 / 30%);
        }

        .triangle {
          margin: 0 auto;
          width: 0px;
          height: 0px;
          border: 10px solid rgba(255, 255, 255, .4);
          border-top-color: rgba(255, 255, 255, .4);
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
}
</style>
